<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script>
    	$("#mypanel").trigger("updatelayout");
   	</script>
   	<script>
   		$(document).ready(function() {
   			$("div").bind("swiperight",function(event) {
   				$("#mypanel").panel("open");
   			});
   		});
   	</script>
	<script>
		function li_1(){
			window.location.href="http://localhost:8080/findAll";
		};
		function li_2(){
			window.location.href="http://localhost:8080/index01";
		};
		function li_3(){
			window.location.href="http://localhost:8080/index03";
		};
		function li_4(){
			window.location.href="http://localhost:8080/index02";
		};
	</script>

   	<style type="text/css">
    	.ui-icon-play:after {
    		background-image: url(img/play.jpg);
    	}
    	.ui-icon-pause:after {
    		background-image: url(img/pause.jpg);
    	}
    </style>
    <script>
		var Is_play=0;
		function onmusicplay()
		{
			var myVideo=document.getElementById("music_player");		//获取audio控件
			var btn_paly=document.getElementById("btn_play");			//获取按钮控件
			if(Is_play==0)										//如果当前状态为暂停
			{
				myVideo.play();									//播放音乐
				Is_play=1;										//更新播放状态
				btn_paly.innerHTML="";						//刷新页面
			}else
			{
				myVideo.pause();								//暂停
				Is_play=0;										//更新播放状态
				btn_paly.innerHTML="";						//刷新页面
			}
		}
	</script>
	<style>
		.ui-grid-a .ui-block-a
		{
			width:67%;
		}
		.ui-grid-a .ui-block-b
		{
			width:27%;
			margin-left:5%;
		}
	</style> 
</head>
<body>
	<div data-role = "page">
		<div data-role="panel" id="mypanel" data-swipe-close="false">
			<h3>作者：梁海琦</h4>
			<h4>作者介绍</h4>
			<p>就读于东莞理工学院城市学院</p>
			<p>性格开朗、稳重、有活力，待人热情、真诚；工作认真负责，积极主动，
			能吃苦耐劳，用于承受压力，勇于创新；有很强的组织能力和团队协作精神，
			具有较强的适应能力；纪律性强，工作积极配合；意志坚强，具有较强的无私奉献精神</p>
		</div>
		<div data-role="header" data-position="fixed" data-theme="b">
			<a href="#" data-role="button" data-iconpos="left" data-icon="arrow-l">返回</a>	
			<h1>我的伙伴</h1>
			<a href="#mypanel" data-role="button" data-iconpos="right" data-icon="grid">关于</a>	
		</div>
		
		<div data-role = "content">
			<div data-role = "collapsible-set">
				<div data-role = "collapsible" data-collapsed="false">
					<h3>我喜欢的歌曲</h3>
						<ul data-role = "listview" data-inset = "true"  data-spilt-theme = "d">
							<li>
								<a href="#">
									<img src="img/jay.png" />
									<h2>说好不哭</h2>
									<p>周杰伦</p>
									<a onClick="onmusicplay();" id="btn_play" href="#" data-icon = "play" ></a>
								</a>
							</li>
							<audio  id="music_player"  controls="controls" style="width:100% ;">
  								<source src="music/jay.mp3" type="audio/mp3"/>
  							</audio>
						</ul>
				</div>  
				<div data-role="collapsible" data-collapsed="true">
					<h3>我喜欢的电影</h3>
					<p>
						<fieldset class="ui-grid-a">
							<div>
								<ul data-role="listview" data-inset="true">
									<h4>《叶问》</h4>
									<!--<div style="text-align: center;">
									<iframe src="//player.bilibili.com/player.html?aid=73197344&cid=125199450&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width: 80%; height: 300px;" > </iframe>
									</div>-->
									<video src="http://vfx.mtime.cn/Video/2019/03/18/mp4/190318231014076505.mp4" controls="controls" style="width:100%;height:100%;">
									</video>
								</ul>
							</div>
							<div>
								<ul data-role="listview" data-inset="true">
									<li data-role="list-divider" data-mini="true">《叶问4》简介</li>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《叶问4》是由博纳影业、东方影业、猫眼影业出品，
									叶伟信执导，甄子丹、吴樾、吴建豪、斯科特·阿金斯、郑则士、陈国坤、高战、李宛妲主演的功夫动作片，
									该片于2019年12月20日在中国内地上映  。该片讲述了远赴美国开馆的李小龙因授武予洋人得罪当地人马，
									叶问现身美国唐人街，引导小龙以武震慑整个唐人街，以德令华洋各路折服的故事。
								</ul>
							</div>
						</fieldset>
					</p>
				</div>   	
			 </div>
		</div>
		
		<div data-role="footer" data-position="fixed" data-theme="b">
			<div data-role="navbar" data="c">
				<ul>
					<li><a th:href="@{/findAll}" onclick="li_1()" data-icon="home">成长轨迹</a></li>
					<li><a th:href="@{/index01}" onclick="li_2()" data-icon="plus">爱好推荐</a></li>
					<li><a th:href="@{/index03}" onclick="li_3()" data-icon="star">阶段印象</a></li>
					<li><a th:href="@{/index02}" onclick="li_4()" data-icon="info">后台管理</a></li>
				</ul>
			</div>
		</div>
		
	</div>
</body>
</html>